<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>0</title>
    <style>
        .box{
            width: 200px;
            height: 124px;
            margin:0 auto;
        }
    </style>
</head>
<body>
<div class="box">
    <img src="../素材/1-small.jpg" >
</div>
<script>
    var btn=document.getElementsByTagName("button");
    var arr=["../素材/1-small.jpg","../素材/2-small.jpg","../素材/3-small.jpg","../素材/4-small.jpg"];
    var Img=document.getElementsByTagName("img")[0];
    var timer=setInterval(fn,1000);
    var i=1;
    function fn(){
        if(i%arr.length<arr.length){
            Img.src=arr[i%arr.length];
        }
        i++;
    }
    Img.onmouseover=function(){
        clearInterval(timer);
    }
    Img.onmouseout=function(){
        timer=setInterval(fn,1000);
    }
</script>
</body>
</html>